<template>
	<view>
		<!-- #ifdef MP -->
		<u-navbar 
		:is-back="uNavbar.isBack"
		:border-bottom="uNavbar.borderBottom">
			<view class="slot-wrap">个人中心</view>
		</u-navbar>
		<!-- #endif -->
		
		<!-- 内容区 -->
		<view>
			<view class="user">
				<view class="user_view">
					<view class="user_name">
						<view class="user_font">{{ login ? list.name : '请登录' }}</view>
						<view class="signature u-line-2">{{ list.tiltle }}</view>
					</view>
					<view class="user_fontsize">
						<view class="user_flex">
							<view class="user_font">{{ login ? list.popularity : '' }}</view>
							<text>人气</text>
						</view>
						<view class="user_flex" @click="clickFans">
							<view class="user_font">{{ login ? list.fans : '' }}</view>
							<text>粉丝</text>
						</view>
						<view class="user_flex" @click="clickAttention()">
							<view class="user_font">{{ login ? list.attention : '' }}</view>
							<text>关注</text>
						</view>
					</view>
				</view>
				<view class="user_viewimg" @click="editProfile(list)" :data-item="JSON.stringify(list)">
					<view class="user_image">
						<u-avatar :src="login ? list.nameImage : ''" mode="circle" size="176"></u-avatar>
						<view class="user_icon">
							<u-icon name="danse_xiugai" custom-prefix="icon" size="32"></u-icon>
						</view>
					</view>
				</view>
			</view>
			
			<view class="svg-icon">
				<view>
					<u-icon name="xiazai" custom-prefix="icon" size="36"></u-icon>
					<view class="svg-icon-font">历史下载</view>
				</view>
				<view>
					<u-icon name="jiekuanshenhezhong1" custom-prefix="icon" size="36"></u-icon>
					<view class="svg-icon-font">审核进度</view>
				</view>
				<view>
					<u-icon name="zhihangfankui" custom-prefix="icon" size="36"></u-icon>
					<view class="svg-icon-font">帮助反馈</view>
				</view>
				<view>
					<navigator url="../../packages/pages/setTheCenter/setTheCenter">
						<u-icon name="shezhi" custom-prefix="icon" size="36"></u-icon>
						<view class="svg-icon-font">设置中心</view>
					</navigator>
				</view>
			</view>
			
			<view class="user-myWorks">
				<view class="myWorks">
					<view class="myyuan">{{ iconShow == true ? '我的作品' : '我喜欢的' }}</view>
					<view class="myview Add-the-work" @click="iconShow = !iconShow">
						<u-icon :name="iconShow?'xianji':'xihuan1'" custom-prefix="icon" size="26"></u-icon>
					</view>
				</view>
				<view class="Add-the-work" @click="AddWork">
					<u-icon name="jia" custom-prefix="icon" size="36"></u-icon>
				</view>
			</view>
			
			<view class="image">
				<block v-for="it in list.worksList" :key="it.id">
					<view class="image-works">
						<view class="works-show">
							<block v-for="item in it.worksImg" :key="item.id">
								<image :src="item.img"></image>
							</block>
						</view>
						<view class="title">{{it.worksTitle}}</view>
						<view class="describe u-line-1">{{it.worksDescribe}}</view>
					</view>
				</block>
			</view>
		
		</view>
		
		<u-toast ref="uToast" />
		<u-tabbar :list="tabBarList" iconSize="48"></u-tabbar>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			login: true,
			list: {
				id: 1,
				name: '倾听她的事', //用户名
				sex: '男',
				tiltle: '每个人都有快乐的时候，你呢？', //提醒语
				nameImage: '/static/image/e3.png', //用户头像
				popularity: 99, //人气板
				fans: 639, //粉丝板
				attention: 99, //关注板
				timeDate: '2020-06-16',
				worksList: [
					{
						id: 1,
						worksTitle: '夜景',
						worksDescribe: 'Website Back Is ABC',
						worksImg: [{
								id: 1,
								img: '../../static/image/1.jpg'
							},
							{
								id: 2,
								img: '../../static/image/1.jpg'
							},
							{
								id: 3,
								img: '../../static/image/1.jpg'
							},
							{
								id: 4,
								img: '../../static/image/1.jpg'
							}
						]
					},
					{
						id: 2,
						worksTitle: '夜景',
						worksDescribe: 'Website Back Is ABC',
						worksImg: [{
								id: 1,
								img: '../../static/image/1.jpg'
							},
							{
								id: 2,
								img: '../../static/image/1.jpg'
							},
							{
								id: 3,
								img: '../../static/image/1.jpg'
							},
							{
								id: 4,
								img: '../../static/image/1.jpg'
							}
						]
					},
					{
						id: 3,
						worksTitle: '夜景',
						worksDescribe: 'Website Back Is ABC',
						worksImg: [{
								id: 1,
								img: '../../static/image/1.jpg'
							},
							{
								id: 2,
								img: '../../static/image/1.jpg'
							},
							{
								id: 3,
								img: '../../static/image/1.jpg'
							},
							{
								id: 4,
								img: '../../static/image/1.jpg'
							}
						]
					}
				]
			},
			uNavbar: {
				isback: false,
				borderBottom: false,
			},
			iconShow: true, //切换我的作品icon图标
		};
	},
	methods: {
		// 点击跳转去新增页面
		AddWork() {
			uni.navigateTo({
				url: '../../packages/pages/addPalette/addPalette'
			});
		},
		// 跳转去粉丝
		clickFans() {
			// 点击进行跳转
			uni.navigateTo({
				url: '../../packages/pages/concerned/concerned?concerned=' + '我的粉丝'
			});
		},
		// 跳转去关注
		clickAttention() {
			// 点击进行跳转
			uni.navigateTo({
				url: '../../packages/pages/concerned/concerned?concerned=' + '我的关注'
			});
		},
		editProfile(list) {
			if (this.login == true) {
				// 把值传递到本地存储中
				uni.setStorage({
					key: 'userlist',
					data: list
				});
				// 点击进行跳转
				uni.navigateTo({
					url: '../../packages/pages/editProfile/editProfile'
				});
			} else {
				this.$refs.uToast.show({
					title: '请登录',
					type: 'default'
				});
			}
		}
	},
	computed: {
		...mapGetters([
			// 根据vuex要求，带有命名空间的函数需要这样获取
			'tabBarList'
		])
	},
	components: {}
};
</script>

<style lang="scss" scoped>
	.slot-wrap {
		font-weight: 700;
		font-size: 48rpx;
		color: #101010;
		line-height: 60rpx;
		text-align: left;
		padding-left: 40rpx;
	}

	// 文字样式 标题
	.fontWeidth7 {
		font-family: PingFangSC;
		font-weight: 700;
		font-size: 28rpx;
		color: rgb(16, 16, 16);
		font-style: normal;
		letter-spacing: 0px;
		line-height: 37px;
		text-decoration: none;
	}
	
	// 文字样式 副标题
	.fontWeidth4 {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 22rpx;
		color: rgb(213, 213, 213);
		font-style: normal;
		letter-spacing: 0px;
		line-height: 20px;
		text-decoration: none;
	}
	
	// 顶部
	.user {
		display: flex;
		height: 382rpx;
		position: relative;
		top: 0;
		left: 0;
		border-radius: 0px 0px 40px 40px;
		background-color: #f5f5f5;
		padding: 50rpx 0;
	
		.user_view {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
	
			.user_name {
				height: 140rpx;
				padding: 0 0 0 40rpx;
				
				.user_font{
					font-weight: 700;
					font-size: 52rpx;
					color: #101010;
					line-height: 74rpx;
				}
				
				.signature{
					font-weight: 400;
					font-size: 28rpx;
					color: #d5d5d5;
					line-height: 40rpx;
				}
			}
	
			.user_fontsize {
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
	
				.user_flex {
					flex: 1;
				}
			}
	
			.user_font {
				font-weight: 700;
				font-size: 36rpx;
				color: #101010;
				line-height: 37px;
			}
	
			text {
				font-weight: 400;
				font-size: 24rpx;
				color: #b4b4b4;
				line-height: 20px;
			}
		}
	
		// 用户头像区
		.user_viewimg {
			width: 260rpx;
			text-align: center;
		}
	
		.user_image {
			position: relative;
	
			image {
				width: 176rpx;
				height: 176rpx;
				border-radius: 50%;
			}
			
			.user_icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background-color: #101010;
				position: absolute;
				top: 120rpx;
				right: 38rpx;
				color: #fff;
				border: 4rpx solid #d5d5d5;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
		}
	}
	
	// 金刚区
	.svg-icon {
		display: flex;
		margin: 50rpx 0;
		justify-content: center;
		align-items: center;
		text-align: center;
	
		view {
			flex: 1;
			font-size: 12px;
	
			.svg-icon-font {
				font-weight: 400;
				color: #101010;
				line-height: 34rpx;
				margin-top: 10rpx;
			}
		}
	}
	
	// 我的作品 || 我的喜欢
	.user-myWorks {
		height: 72rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
		
		.myWorks{
			display: flex;
			
			
			.myyuan{
				width: 172rpx;
				height: 72rpx;
				background-color: #101010;
				color: #ffffff;
				border-radius: 120rpx;
				font-size: 28rpx;
				padding: 0rpx;
				text-align: center;
				line-height: 72rpx;
				font-weight: bold;
			}
			
			.myview{
				margin-left: 20rpx;
			}
		}
		
		.Add-the-work{
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			background-color: #ececec;
			color: #cccccc;
			font-size: 28rpx;
			text-align: center;
			line-height: 72rpx;
			font-weight: bold;
		}
		
	}
	
	// 作品展示
	.image {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 20px;
	
		.image-works {
			width: 324rpx;
			display: flex;
			flex-wrap: wrap;
			margin-top: 60rpx;
	
			.works-show {
				width: 100%;
				height: 324rpx;
				display: flex;
				justify-content: space-between;
				align-content: space-between;
				flex-wrap: wrap;
	
				image {
					width: 156rpx;
					height: 156rpx;
	
					&:nth-child(1) {
						border-top-left-radius: 20rpx;
					}
	
					&:nth-child(2) {
						border-top-right-radius: 20rpx;
					}
	
					&:nth-child(3) {
						border-bottom-left-radius: 20rpx;
					}
	
					&:nth-child(4) {
						border-bottom-right-radius: 20rpx;
					}
				}
			}
	
			.title {
				font-weight: 700;
				font-size: 28rpx;
				color: #101010;
				margin: 20rpx 0 4rpx;
			}
	
			.describe {
				width: 324rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #E9E9E9;
			}
		}
	}
	
</style>
